<template>
  <div class="shop__header">
    <div class="shop__header__search">
      <div class="iconfont" @click="handleBackClick">&#xe60e;</div>
      <Search :count="count"/>
    </div>
    <NearbyItem :item="dataList" :showBorder="showBorder" v-if="dataList.imgUrl"/>
  </div>
  <ShopConent :shopName="dataList.name"/>
  <Cart />
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import NearbyItem from '../../components/home-components/nearby-component/NearbyItem.vue'
import Search from '../../components/home-components/Search.vue'
import ShopConent from './shopConent/ShopConent.vue'
import Cart from './cart/Cart.vue'
import { reactive, toRefs } from 'vue'
import { get } from '../../utils/axiosPost'
import '../../style/iconfont.css'

const getItemFn = () => {
  const route = useRoute()
  const id = route.params.id
  const dataObject = reactive({ dataList: {} })
  const getItem = async () => {
    const result = await get(`/api/shop/${id}`)
    dataObject.dataList = result
  }
  const { dataList } = toRefs(dataObject)
  return { dataList, getItem }
}

const backFn = () => {
  const router = useRouter()
  const handleBackClick = () => {
    router.back()
  }
  return { handleBackClick }
}

const dataConent = {
  count: '请输入商品名称搜索',
  showBorder: true
}

export default {
  name: 'Shop',
  components: { NearbyItem, Search, ShopConent, Cart },
  setup () {
    const { count, showBorder } = dataConent
    const { getItem, dataList } = getItemFn()
    getItem()
    const { handleBackClick } = backFn()
    return { dataList, showBorder, count, handleBackClick }
  }
}
</script>

<style lang="scss">
.shop__header{
  padding:0 .18rem;
}
.shop__header__search {
  margin:.16rem 0 .16rem 0;
  display: flex;
  height: .32rem;
  .iconfont {
    font-size: .32rem;
    height: 100%;
    line-height: .32rem;
    color: #B6B6B6;
  }
  .search__box_input {
    font-size: .14rem;
    color: #333333;
  }
  .search__box_input::-webkit-input-placeholder{
    font-size: .14rem;
    color: #333333;
    line-height: .16rem;
  }
}
</style>
